<template>
    <form id="addForm" action="append?method=appenduser" method="post">
	<table class="tab" >
		<tr class="col1">
			<td>姓名</td>
			<td>
			<input type="text" class="name" name="name" />
			</td>
			<td rowspan="3">图片</td>
			<td rowspan="3"><input type="file" id="test-image-file" name="test" accept="image/gif, image/jpeg, image/png, image/jpg"></td>
		</tr>
		<tr class="col2">
			<td>年龄</td>
			<td>
				<input type="text" class="age" name="age" />
			</td>
		</tr>
		<tr class="col3">
			<td>联系方式</td>
			<td>
				<input type="text" class="phone" name="phone"/>
			</td>
		</tr>
		<tr>
			<td>身份证</td>
			<td>
				<input type="text" class="id" name="id"/>
			</td>
			<td>性别</td>
			<td>
				<input type="text" class="gender" name="gender"/>
			</td>
		</tr>
		<tr>
			<td>住址</td>
			<td>
				<input type="text" class="address" name="address"/>
			</td>
			<td>民族</td>
			<td>
				<input type="text" class="nation" name="nation" />
			</td>
		</tr>
	</table>
	<div align ="right">
	<button class="ok" type="submit">
				提交
		</button></div>
	</form>
</template>

<script>
    var
	fileInput = document.getElementById('test-image-file'),
	info = document.getElementById('test-file-info'),
	preview = document.getElementById('test-image-preview');
	// 监听change事件:
	fileInput.addEventListener('change', function() {
		// 清除背景图片:
		preview.style.backgroundImage = '';
		// 检查文件是否选择:
		if (!fileInput.value) {
		info.innerHTML = '没有选择文件'
    		return;
		}
		// 获取File引用:
		var file = fileInput.files[0];
		//判断文件大小
		var size = file.size;
		if (size >= 1 * 1024 * 1024) {
			alert('文件大小超出限制');
			return false;
		}
		// 获取File信息:
		info.innerHTML = '文件名称: ' + file.name + '<br>' +
						 '文件大小: ' + file.size + '<br>' +
						 '上传时间: ' + file.lastModifiedDate;
		if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
			alert('不是有效的图片文件!');return;
		}
		// 读取文件:
		var reader = new FileReader();
		reader.onload = function(e) {
			var data = e.target.result;         
			preview.style.backgroundImage = 'url(' + data + ')';
		};
		// 以DataURL的形式读取文件:
		reader.readAsDataURL(file);	
	});
</script>


<style scoped>
@charset "UTF-8";
*{
	margin: 0px;
	padding: 0px;
	font-size: 14px;
	font-family: "microsoft yahei";
}
body
{
	margin-left: 20px;
	margin-right: 20px;
}
.tab{
	margin-top: 10px;
	width: 100%;
/* 	border: 1px solid greenyellow; */
	border-collapse: collapse;
}
tr{
	height: 50px;
}
.tab td{
	border: 1px solid aquamarine;
	padding-left: 20px;
}
.tab tr:nth-child(even){
	background-color: #F8F8F8;
}
td:hover{
	background-color: #F2F2FA;
}
input{
	height: 35px;
	border:1px #AAAAAA solid;
	border-radius: 5px ;
	width: 80%;
	box-sizing: border-box;
	padding-left: 20px;
}
</style>